/*
* @Title: 景区神器-游客中心
* @Created by: ycq
*/
<template>
	<view class="Tourist">
		<view class="tourist-head">
			<text class="head-title" @click="openCall">
				游客中心(<text class="call">400-8820882</text>)
			</text>
			<view class="kefu" @click="toService">
				<image class="img"  src="../static/kf.png" mode=""></image>
				<text>人工客服</text>
			</view>
		</view>
		<view class="tourist-list">
			<view class="sos" @click="openCallSOS">
				<view class="sostitle">sos</view>
				<view class="sosmain">若非紧急情况，请勿点击，请勿占用公共资源</view>
			</view>
			<view class="tourist-item">
				<view class="item-label" @click="chooseTap(0)">
					<text class="item-label-text">景区通知</text>
					<image :class="tapIndex==0?'tap-ac':''" src="/static/jiantou.png" mode=""></image>
				</view>
				<view class="item-info" v-if="tapIndex==0">
					<text class="item-text">清新观景台，在清新大道中轴线北端与环城路交汇处的花尖山脚，建设一座高度100米的观景台，
						观景台的建设成为清新城市建设一大亮点,据介绍，观景台是松林生态公园的主体设施，设计有瀑布、浮雕、凉亭和名贵花草树木。
						站在观景台上可鸟瞰清远市区和清新县全景。</text>
				</view>
			</view>
			<view class="tourist-item">
				<view class="item-label" @click="chooseTap(1)">
					<text class="item-label-text">演艺活动</text>
					<image :class="tapIndex==1?'tap-ac':''" src="/static/jiantou.png" mode=""></image>
					<text class="time-label">时间安排</text>
				</view>
				<view class="item-info" v-if="tapIndex==1">
					<!-- <view class="show-item" v-for="(item,index) in showData" :key='index'>
						<text class="show-name">{{item.name}}</text>
						<text class="show-room">{{item.room}}</text>
						<text class="show-time">{{item.time}}</text>
					</view> -->
					<view class="show-itemb"  v-for="(item,index) in showData" :key='index'>
						<view class="show_main">
							{{item.name}}
						</view>
						<view class="show_main">
							{{item.room}}
						</view>
						<view class="show_main">
							{{item.time}}
						</view>
						<view class="show_main">
							<view class="show_mai_button">详情</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tourist-item">
				<view class="item-label" @click="chooseTap(2)">
					<text class="item-label-text">投诉建议</text>
					<image :class="tapIndex==2?'tap-ac':''" src="/static/jiantou.png" mode=""></image>
				</view>
			</view>
			<view class="tourist-item">
				<view class="item-label" @click="chooseTap(3)">
					<text class="item-label-text">常见问题</text>
					<image :class="tapIndex==3?'tap-ac':''" src="/static/jiantou.png" mode=""></image>
				</view>
				<view class="item-info" v-if="tapIndex==3">
					<text class="ques">问题一</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				however:"",
				tapIndex: 0,
				showData: [{
						name: '魔术表演',
						room: '1展示厅',
						time: '12:00'
					},
					{
						name: '魔术表演',
						room: '2展示厅',
						time: '13:00'
					}
				]
			}
		},
		methods: {
			toService() {
				uni.navigateTo({
					url:'/pages/home/scenicSpot/map/chat'
				})
			},
			chooseTap(id) {
				this.tapIndex = id
			},
			close() {

			},
			openCall() {
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.toCall('open');
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.toCall('open');
				//#endif
			},
			
			openCallSOS(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.toCallSOS('open');
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.toCallSOS('open');
				//#endif
			}
		},
	}
</script>

<style scoped>
	.Tourist {
		width: 750upx;
		height: 811upx;
		background: #FFFFFF;
		border-radius: 20upx 20upx 0 0;
		position: fixed;
		bottom: 110upx;
		/* overflow: scroll; */
	}

	.tourist-head {
		height: 100upx;
		width: 750upx;
		display: flex;
		flex-direction: row;
		border-bottom: #DCDCDC solid 1px;
	}

	.head-title {
		width: 750upx;
		height: 80upx;
		display: block;
		color: #333333;
		line-height: 100upx;
		font-size: 30upx;
		text-align: center;
		margin-left: 149upx;
	}
	.kefu{
		display: flex;
		flex-direction:column;
		margin-top: 15upx;
		/* justify-content:center; */
	}
	.kefu .img{
		width: 35upx;
		height: 38upx;
		margin-left: 32upx;
	}
	.kefu text{
		width: 100upx;
		font-size: 22upx;
		margin-right: 14upx;
		color: rgba(51,51,51,1.00);
	}
	.call {
		color: #5773FE;
		width: 220upx;
		z-index: 30;
		height: 80upx;
	}

	.tourist-list {
		width: 750upx;
		height: 720upx;
		background: #FFFFFF;
		overflow: scroll;
	}

	.tourist-item {
		width: 750upx;
		height: auto;
		display: table;
	}

	.item-label {
		width: 750upx;
		height: 40upx;
		margin-top: 40upx;
		margin-bottom: 40upx;
	}

	.item-label-text {
		font-size: 30upx;
		color: #333333;
		float: left;
		margin-left: 23upx;
	}

	.time-label {
		float: right;
		font-size: 24upx;
		margin-right: 30upx;
		line-height: 40upx;
		color: #999999;
	}

	.item-label image {
		width: 24upx;
		height: 24upx;
		margin-top: 10upx;
		transform: rotate(90deg);
		float: right;
		margin-right: 24upx;
	}

	.tap-ac {
		transform: rotate(270deg) !important;
	}

	.item-info {
		width: 750upx;
		height: auto;
		padding-top: 10upx;
	}

	.item-text {
		width: 678upx;
		font-size: 24upx;
		color: #666666;
		margin: 0 36upx 10upx 36upx;
		text-indent: 48upx;
		display: block;
	}

	.show-item {
		width: 638upx;
		height: 94upx;
		margin: auto;
		font-size: 24upx;
		color: #333333;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.ques {
		width: 100%;
		height: 40upx;
		font-size: 30upx;
		text-align: center;
		line-height: 40upx;
		color: #333333;
		display: block;
	}

	.sos {
		width: 703upx;
		background-color: #FFF3F3;
		margin: 7upx auto;
		border-radius: 10upx;
		
		text-align: center;
	}
	.sostitle{
		width: 100%;
		padding:0upx 0upx 19upx 0upx;
		color: #FA2C2C;
		text-align: center;
		font-size: 36upx;
	}
	.sosmain{
		width: 100%;
		padding:0upx 0upx 17upx 0upx;
		color: #333333;
		text-align: center;
		font-size: 22upx;
	}
	.show-itemb{
		width:638upx;
		display:flex;
		margin: auto;
		justify-content: center;
	}
	.show_main{
		width: 25%;
		text-align: center;
		padding:36upx 0upx ;
		font-size: 24upx;
		line-height: 40upx;
	}
	.show_mai_button{
		width: 100upx;
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		color: #577AFF;
		border-radius: 100upx;
		background-color:#FFFFFF;
		border:1px solid #577AFF;
		 /* border-image:linear-gradient(to right,#A8D7FF,#577AFF) 1 10; */
		/* border-image: linear-gradient( left, #A8D7FF,#577AFF); */
	}
</style>
